<template>
  <!--我 组件-->
  <div class="setting">
    <section>
      <div class="weui-cells" v-if="flag">
        <div class="weui-cell ">
          <div class="weui-cell__bd">用户账号：</div>
          <div class="weui-cell__ft">{{userAccount}}</div>
        </div>
        <div class="weui-cell ">
          <div class="weui-cell__bd">用户权限：</div>
          <div class="weui-cell__ft" v-for="item in userRole">{{item.roleName}}</div>
        </div>
      </div>
      <div class="weui-cells">
        <div class="weui-cell ">
          <div class="weui-cell__bd">监控点</div>
        </div>
        <div class="weui-cell " v-for="item in areaList" v-show="item.pid != '-1'">
          <div class="weui-cell__bd"></div>
          <div class="weui-cell__ft" >{{item.name}}</div>
        </div>
      </div>
      <div class="weui-btn-area">
        <button class="weui-btn weui-btn_warn" id="exitBtn" v-on:click="logOut">退出登录</button>
      </div>
    </section>
  </div>
</template>
<script>
  import * as LoginApi from '../../api/login'
  import * as UserApi from '../../api/user'
  export default {
    data(){
      return{
        userAccount : '',
        userRole : '',
        areaList : '',
        flag: false
      }
    },
    mounted:function(){
      if(window.localStorage.getItem("userName") != 'admin'){
        UserApi.loginUserInfo((response) => {
          const user = response.obj.user;
          const roles = response.obj.roles;
          const areaList = response.obj.areaList;
          this.userAccount = user.userName;
          this.userRole = roles;
          this.areaList = areaList;
          this.flag = true;
        })
      }
    },
    methods: {
      // 暂且用不到 先留着
      logOut() {
        LoginApi.logout((response)=>{})
        window.localStorage.removeItem('userName');
        this.$router.push({path: '/login'});
      }
    }
  }
</script>
<style>
    @import "../../assets/css/self.css";
</style>
